<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('查看设备信息')" />
    <style>
        .newsTableBox{
            /*overflow: hidden;*/
            /*position: relative;*/
            /*width: 100%;*/
        }
        .newsTableBox thead{
            display: flex;
            display: -o-flex;
            display: -ms-flex;
            display: -moz-flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
        }
        .newsTableBox tbody{
            /*width: 100%;*/
            display: flex;
            display: -o-flex;
            display: -ms-flex;
            display: -moz-flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
        }

        .newsTableBox tbody tr{
            /*width: 12.5%;!**  265px ***!*/
            display: flex;
            display: -o-flex;
            display: -ms-flex;
            display: -moz-flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
        }
        .newsTableBox tbody tr td{
            /*width: 60%;*/
            padding: 0;
        }

        .newsTableBox tr,.newsTableBox td,.newsTableBox th{
            border: none;
        }
        #bootstrap-table thead tr{
            width: 100%;
        }
        /*#bootstrap-table thead tr .aa{*/
            /*width: 200px!important;*/
        /**/
        /*}*/

        #bootstrap-table thead tr th{
            /*width: 12.5%!important;*/
        }


    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-dxf-edit">

        <div>
            <div class="form-group" align="center">
                <div class="select-list">
                    <ul>
                        <li>
                            <p>文件编码：</p>
                            <input type="text" id="fileCode" name="fileCode" th:value="${dwgIndex.fileCode}" disabled="disabled"/>
                        </li>
                        <li style="width: 25%">
                            <p>文件名称：</p>
                            <input type="text" id="fileName" style="width: 78%; float: left" name="fileName" th:value="${dwgIndex.fileName}" th:title="${dwgIndex.fileName}" disabled="disabled"/>
                        </li>
                        <li>
                            <p>版本：</p>
                            <input type="text" id="version" name="version" th:value="${dwgIndex.version}" disabled="disabled"/>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form-group">
                <div class="select-list">
                    <ul>
                        <li>
                            <p>系统：</p>
                            <input type="text" id="system" name="system" th:value="${dwgIndex.system}" disabled="disabled" style="align-content: center"/>
                        </li>
                        <li style="width: 25%">
                            <p>子项：</p>
                            <input type="text" id="subitem"  name="subitem" th:value="${dwgIndex.subitem}" disabled="disabled" style="width: 78%; float: left"/>
                        </li>
                        <li>
                            <p>版次：</p>
                            <input type="text" id="edition" name="edition" th:value="${dwgIndex.edition}" disabled="disabled" style="align-content: center"/>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="row">
            <div id="tableDiv" class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table" class="newsTableBox"></table>
            </div>
        </div>

    </form>

</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-table-editable-js" />
<script th:inline="javascript">
    var prefix = ctx + "dxfcomponent/dxf";

    /*** 初始化表格 */
    $(function() {

        var drawId = [[${dwgIndex.drawId}]];
        var options = {
            url: prefix + "/component/" + drawId,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            showPageGo: true,
            onEditableSave: onEditableSave,
            onLoadSuccess: function () {
                var data= $('#bootstrap-table').bootstrapTable('getData',true);
                if(data.length>0){
                    tableStyle();
                }
            },
            columns: [
                {
                    field : 'contentO',
                    title : '设备原始数据',
                    visible: false
                },
                {

                    title: "序号",
                    // width : '500px',
                    align: "center",
                    formatter: function (value, row, index) {
                        return $.table.serialNumber(index);
                    }
                },
                {
                    field : 'contentC',

                    align: "center",
                    title : '设备编码'
                },
                {
                    field : 'type',
                    title : '设备类型',
                    visible: false,
                },
                {
                    field : 'layer',
                    title : '图层',
                    visible: false
                },
                {
                    field : 'positionX',
                    title : 'X坐标',
                    visible: true
                },
                {
                    field : 'positionY',
                    title : 'Y坐标',
                    visible: true
                }]
        };
        $.table.init(options);

        //设置表格表头宽度
        $("#bootstrap-table thead tr").append("<th class='aa' style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\" width='10%'><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
            .append("<th class='bb' style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">X坐标</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">Y坐标</div><div class=\"fht-cell\"></div></th>")
            // .append("<th class='aa' style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">X坐标</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">Y坐标</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
            // .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>");
    });

    function onEditableSave (field, row, oldValue, $el) {  }

    function tableStyle() {
        // $("#bootstrap-table tbody tr td").width($("#bootstrap-table").width()/18.7);
        $("#bootstrap-table tbody tr").css("border-right","1px solid #C0C0C0");
        $("#bootstrap-table tbody tr td:odd").css("color","#009FCC");
        var  width = $("#tableDiv").width();
        // $("#bootstrap-table tbody tr").width(($("#tableDiv").width()/7)-5);
        // $("#bootstrap-table tbody tr td").width(($("#bootstrap-table tbody tr").width()/2.6));
        // $("#bootstrap-table").width($("#bootstrap-table tbody tr").width()*7+6);
        $("#bootstrap-table thead th").width($("#bootstrap-table").width()/8);
        $("#bootstrap-table tbody td").width($("#bootstrap-table").width()/9);
        // $("#bootstrap-table thead th").style('width','100px');
        console.log($("#bootstrap-table").width())
    }
</script>
</body>
</html>